<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="Transition.css">
</head>

<body>
<style>
*{ margin: 0; padding: 0; } body{ background:white; } .container .bar{ background: #fff; width: 200px; height: 30px; margin: 100px auto; border-radius: 7px; border:3px solid #eeeeee; box-shadow: 0 0 1px #555; position: relative; } .container .bar:after{ content: "Loading..."; font:normal 18px verdana; position: absolute; left: 50px; top: 50px; } .container .bar .span{ width:24px; height: 100%; border-radius:50%; background: #ddd; display: block; -moz-animation:slide 1.75s infinite ease-in-out alternate; animation:slide 1.75s infinite ease-in-out alternate; -webkit-animation:slide 1.75s infinite ease-in-out alternate; -o-animation:slide 1.75s infinite ease-in-out alternate; -ms-animation:slide 1.75s infinite ease-in-out alternate; } @keyframes slide{ to {margin-left:88%; } }-moz-@keyframes slide{ to {margin-left:88%; } } @-webkit-frames slide{ to {margin-left:88%; } } @-o-keyframes slide{ to {margin-left:88%; } } @-ms-keyframes slide{ to {margin-left:88%; } }</style>
<div class="container"> <div class="bar"> <div class="span"></div> </div> </div>
</div>
</div>


</body>

</html>